<template>
  <div class="footer-page">
    <!-- 页脚 -->
    <div class="container">
      <ul class="footer_ul clearfix">
        <li>
          <ul class="btm_menu">
            <li>
              <h3>购物指南</h3>
            </li>
            <li>
              <a href="/Home/Article/index/page/gwlc.html" target="_blank"
                >购物流程</a
              >
            </li>
            <li>
              <a href="/Home/Article/index/page/gwlc.html" target="_blank"
                >购物流程</a
              >
            </li>
            <li>
              <a href="https://www.962360.com/ticket.html" target="_blank"
                >抵用券使用
              </a>
            </li>
            <li>
              <a href="https://www.962360.com/balance.html" target="_blank"
                >余额使用
              </a>
            </li>
            <li>
              <a href="https://www.962360.com/restcard.html" target="_blank"
                >餐厅卡使用
              </a>
            </li>
            <li>
              <a href="https://www.962360.com/exchange.html" target="_blank"
                >红绿卡使用
              </a>
            </li>
            <li>
              <a href="https://www.962360.com/coupon.html" target="_blank"
                >优惠码使用
              </a>
            </li>
            <li>
              <a href="/Home/Article/index/page/shfwzc.html" target="_blank"
                >退换货政策</a
              >
            </li>
            <li>
              <a href="/Home/Article/index/page/thhsm.html" target="_blank"
                >退换货说明</a
              >
            </li>
          </ul>
        </li>
        <li>
          <ul class="btm_menu">
            <li>
              <h3>配送方式</h3>
            </li>
            <li>
              <a href="/Home/Article/index/page/pssj.html" target="_blank"
                >配送时间</a
              >
            </li>
            <li>
              <a href="/Home/Article/index/page/psfw.html" target="_blank"
                >配送范围</a
              >
            </li>
            <li>
              <a href="/Home/Article/index/page/psfy.html" target="_blank"
                >配送费用</a
              >
            </li>
          </ul>
        </li>
        <li>
          <ul class="btm_menu">
            <li>
              <h3>支付方式</h3>
            </li>
            <li>
              <a href="/Home/Article/index/page/wyzf.html" target="_blank"
                >网银支付</a
              >
            </li>
            <li>
              <a href="/Home/Article/index/page/gkxy.html" target="_blank"
                >购卡协议</a
              >
            </li>
            <li>
              <a href="/Home/Article/index/page/gkzc.html" target="_blank"
                >购卡章程</a
              >
            </li>
            <li>
              <a href="/Home/Article/index/page/tklc.html" target="_blank"
                >退款流程</a
              >
            </li>
          </ul>
        </li>
        <li>
          <ul class="btm_menu">
            <li>
              <h3>联系我们</h3>
            </li>
            <li>
              <a href="/Home/Article/index/page/aboutUs.html" target="_blank"
                >关于我们</a
              >
            </li>
            <li>
              <a href="/Home/Article/index/page/dhkf.html" target="_blank"
                >电话客服</a
              >
            </li>
            <li>
              <a href="/Home/Article/index/page/dzyj.html" target="_blank"
                >电子邮件</a
              >
            </li>
            <li>
              <a href="http://www.962360.com/registerRule.htm" target="_blank"
                >注册协议</a
              >
            </li>
            <li>
              <a href="http://www.962360.com/privateRule.htm" target="_blank"
                >隐私协议</a
              >
            </li>
          </ul>
        </li>
        <li>
          <ul class="btm_menu">
            <li>
              <h3>光明服务菜管家手机端</h3>
            </li>
            <li>
              <a href="/Home/Article/index/page/aboutUs.html" target="_blank"
                >IOS版</a
              >
              <br />
              <img src="../assets/img/ios.png" alt="" />
            </li>
            <li>
              <a href="/Home/Article/index/page/dhkf.html" target="_blank"
                >Android版</a
              >
              <br />
              <img src="../assets/img/And.png" alt="" />
            </li>
          </ul>
        </li>
      </ul>
      <div class="info_box">
        <ul class="info_ul clearfix">
          <li><a href="#">友情链接</a><span></span></li>
          <li><a href="#">光明食品集团</a><span></span></li>
          <li><a href="#">光明地产</a><span></span></li>
          <li><a href="#">上海房产网</a><span></span></li>
        </ul>
        <br />
        <!-- 底部注册时间 -->
        <p>
          2009-2022 www.962360.com
          <a
            class="license"
            href="https://beian.miit.gov.cn/#/Integrated/index"
            target="_blank"
            >沪ICP备13042428号</a
          >
          食品经营许可证（含网络）：JY13101050013908 ICP许可证号： 沪B2-20170084
          © 光明服务菜管家
        </p>
        <!-- 底部标签 -->
        <ul class="label">
          <li>
            <a class="label_img" href="#">
              <img src="../assets/img/10176.jpg" alt="" />
            </a>
            <span class="label_name">上海工商</span>
          </li>
          <li>
            <a class="label_img" href="#">
              <img src="../assets/img/10050.png" alt="" />
            </a>
            <span class="label_name">可信网站</span>
          </li>
          <li>
            <a class="label_img" href="#">
              <img src="../assets/img/10177.png" alt="" />
            </a>
            <span class="label_name">安信保</span>
          </li>
          <li>
            <a class="label_img" href="#">
              <img src="../assets/img/10178.jpg" alt="" />
            </a>
            <span class="label_name">网购大家评</span>
          </li>
          <li>
            <a class="label_img" href="#">
              <img src="../assets/img/10180.png" alt="" />
            </a>
            <span class="label_name">消费者维权联络点</span>
          </li>
          <li>
            <a class="label_img" href="#">
              <img src="../assets/img/10179.png" alt="" />
            </a>
            <span class="label_name">沪ICP备 13042428号</span>
          </li>
          <li>
            <a class="label_img" href="#">
              <img src="../assets/img/10181.jpg" alt="" />
            </a>
            <span class="label_name">962110</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.footer-page {
  /* 页脚 */
  width: 100%;
  min-width: 960px;
  padding-top: 150px;
  padding-bottom: 10px;
  background-color: #fff;
  float: left;

  .footer_ul > li {
    width: 20%;
    float: left;
    text-align: center;
  }

  .btm_menu > li > h3 {
    font-size: 19px;
    color: #515151;
  }

  .btm_menu > li > a {
    line-height: 30px;
    font-size: 15px;
    font-weight: 400;
    color: #000;
  }

  .btm_menu > li > a:hover {
    color: #7f0019;
  }

  .btm_menu > li > img {
    width: 80px;
    height: 80px;
  }

  .info_box {
    margin-top: 60px;
    padding-left: 80px;
  }

  .info_ul {
    width: 100%;
    height: 20px;
  }

  .info_ul > li {
    font-size: 15px;
    font-weight: 400;
    float: left;
  }

  .info_ul > li > span {
    border-right: 1px solid #000;
    margin: 0 20px;
  }

  .info_ul > li:last-of-type > span {
    border: none;
  }

  /* 底部注册时间 */
  .info_box > p {
    font-size: 12px;
    color: #515151;
  }

  .license {
    font-size: 15px;
    font-weight: 400;
  }

  /* 底部标签 */
  .label {
    margin-top: 10px;
  }

  .label > li {
    /* width: 110px; */
    height: 40px;
    float: left;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    padding: 0 6px;
    margin-left: 10px;
  }

  .label > li:first-of-type {
    margin-left: 0px;
  }

  .label_img > img {
    width: 30px;
    height: 30px;
  }

  .label_name {
    font-size: 14px;
    color: #515151;
    margin-left: 10px;
    font-weight: 500;
    cursor: pointer;
  }

  .label_name:hover {
    border-bottom: 1px solid #000;
  }
}
</style>